<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 所有vue的插值语法中,如果使用变量,则都是去当前容器所被挂载的vm实例的属性上去寻找 -->
      <h1>{{name}}的基础使用</h1>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        /* 
                data可以是一个对象，是Vue实例数据对象
                data的数据会在实例对象vm上作为属性存放起来
                data也可以是一个函数，返回一个对象，对象中存放当前实例需要的数据，并且建议是一个函数
            */
        /* 
            data:{
                project:"Vue",
                name:"xiaowang",
                age:18,
            }
           */
        /* 
            为什么组件内的data要书写为一个函数？？？？
                当一个组件被定义，data必须声明为返回一个初始数据对象的函数因为组件可能被用来创建多个实例(组件可能被复用)，如果data仍然是一个纯粹的对象，则所有的实例就会共享引用同一个数据，数据会被互相影响，通过提供data函数，每次创建一个新的实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象
          */
        data() {
          return {
            project: "Vue",
            nama: "xiaowang",
            age: 18,
          };
        },
      });

      console.log(vm);

      //为什么data 不能写成函数？

      /* 
        // 假设这里有一个page组件的数据，组件要被A和B复用
        const page ={ 
            currentPage:0,
            total:0,
        };
        //A使用了page组件，A就拿到了page的数据
        A = page;
        A.currentPage = 1;
        A.total = 10;
        //B使用了page组件，B就拿到的page的数据
        B = page;
        B.currentPage = 2;
        B.total = 5;

        // 因为对象的赋值是地址的赋值，所以A和B和Page共享一个对象，任意修改某一个则会被影响其他

        console.log(A);
        console.log(B);
        
        A.currentPage = 3;
      */

      // 为什么data写成函数？
      /* 
        // 初始化page数据，把数据定义成一个函数
        const page = function(){
            return {
                currentPage:0,
                total:0,
            }
        }

        //A使用了page组件,A就拿到的page的数据
        A = page();
        A.currentPage = 1;
        A.total = 10;
        
        //B使用了page组件,B就拿到的page的数据
        B = page();
        B.currentPage = 3;
        B.total = 5;
        
        console.log(A === B); //false
        console.log(A);
        console.log(B); 
      */
    </script>
  </body>
</html>
